<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-08-14 17:05:18
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-09-05 13:33:34
 * @FilePath: \hy-ui\src\views\taskMassage\components\task\components\screen.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="viewRow" style="margin-left: 20px">
    <el-popover
      placement="bottom"
      popper-class="viewRowPopper"
      width="220"
      trigger="click"
      ref="attribute"
    >
      <i
        slot="reference"
        class="el-icon-setting"
        style="color: #999; cursor: pointer"
      ></i>

      <div class="attributeMain" style="padding: 8px 5px">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
          "
        >
          <span><span>创建人</span></span>
          <el-switch
            v-model="pro_table_col.createByName"
            @change="handleAttribute(pro_table_col)"
          >
          </el-switch>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
          "
        >
          <span><span>管理员</span></span>
          <el-switch
            v-model="pro_table_col.admin"
            @change="handleAttribute(pro_table_col)"
          >
          </el-switch>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
          "
        >
          <span><span>项目状态</span></span>
          <el-switch
            v-model="pro_table_col.status"
            @change="handleAttribute(pro_table_col)"
          >
          </el-switch>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
          "
        >
          <span><span>项目创建时间</span></span>
          <el-switch
            v-model="pro_table_col.createTime"
            @change="handleAttribute(pro_table_col)"
          >
          </el-switch>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
          "
        >
          <span><span>项目开始时间</span></span>
          <el-switch
            v-model="pro_table_col.startTime"
            @change="handleAttribute(pro_table_col)"
          >
          </el-switch>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
          "
        >
          <span><span>项目结束时间</span></span>
          <el-switch
            v-model="pro_table_col.endTime"
            @change="handleAttribute(pro_table_col)"
          >
          </el-switch>
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
          "
        >
          <span><span>完成进度</span></span>
          <el-switch
            v-model="pro_table_col.progress"
            @change="handleAttribute(pro_table_col)"
          >
          </el-switch>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  props: {
    handleAttribute: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      pro_table_col: {
        createByName: false,
        admin: true,
        status: true,
        createTime: false,
        startTime: true,
        endTime: true,
        progress: true,
      },
    };
  },
  methods: {},
  created() {
    if (localStorage.getItem("pro_table_col")) {
      this.pro_table_col = JSON.parse(localStorage.getItem("pro_table_col"));
    } else {
      localStorage.setItem("pro_table_col", JSON.stringify(this.pro_table_col));
      this.pro_table_col = JSON.parse(localStorage.getItem("pro_table_col"));
    }
  },
};
</script>

<style lang="scss" scoped>
.viewRow {
  .attributeMain {
    padding: 8px;
  }
}
</style>